<%- include('../layouts/base/header', { title: '首页' }) %>

<div class="min-h-screen">
    <div class="bg-blue-400 relative">
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
            <div class="text-center">
                <h1 class="text-5xl md:text-7xl font-bold text-white mb-8 tracking-tight"><%= locals.site?.site_name %></h1>
                <p class="text-xl md:text-3xl text-blue-100 mb-8 max-w-3xl mx-auto font-light"><%= locals.site?.site_description %></p>
                <div class="flex flex-col sm:flex-row gap-6 justify-center">
                    <% if (user) { %>
                        <%- include('../components/button', { href: '/book/create', text: '创建书籍', target: '_blank', icon: 'fas fa-plus', size: 'lg', className: 'px-8 py-4 text-blue-600' }) %>
                        <%- include('../components/button', { href: '/explore', text: '浏览书籍', icon: 'fas fa-book', variant: 'outline', size: 'lg', className: 'px-8 py-4 border-2 border-white text-white hover:bg-white hover:text-blue-600' }) %>
                    <% } else { %>
                        <%- include('../components/button', { href: '/auth/register', text: '开始创作', target: '_blank', icon: 'fas fa-rocket', size: 'lg', className: 'px-8 py-4 text-blue-600' }) %>
                        <%- include('../components/button', { href: '/explore', text: '探索内容', icon: 'fas fa-compass', variant: 'outline', size: 'lg', className: 'px-8 py-4 border-2 border-white text-white hover:bg-white hover:text-blue-600' }) %>
                    <% } %>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                <div class="text-center">
                    <div class="text-3xl md:text-4xl font-bold mb-2 text-blue-600">
                        <%= stats?.total_books || 0 %>
                    </div>
                    <div class="text-gray-600 font-medium">书籍总数</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl md:text-4xl font-bold mb-2 text-green-600">
                        <%= stats?.total_users || 0 %>
                    </div>
                    <div class="text-gray-600 font-medium">注册用户</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl md:text-4xl font-bold mb-2 text-purple-600">
                        <%= stats?.total_views || 0 %>
                    </div>
                    <div class="text-gray-600 font-medium">总浏览量</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl md:text-4xl font-bold mb-2 text-orange-600">
                        <%= stats?.total_shares || 0 %>
                    </div>
                    <div class="text-gray-600 font-medium">分享次数</div>
                </div>
            </div>
        </div>
    </div>

    <div class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-gray-900 mb-6">热门书籍</h2>
                <p class="text-xl text-gray-600">发现社区中最受欢迎的内容</p>
            </div>

            <% if (hotBooks && hotBooks.length > 0) { %>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
                    <% hotBooks.forEach(book => { %>
                        <div class="bg-white rounded-lg hover:shadow-lg transition-all duration-300 border border-gray-100 overflow-hidden">
                            <div class="p-8">
                                <div class="flex flex-col space-y-6">
                                    <div class="flex items-start space-x-6">
                                        <div class="flex-shrink-0">
                                            <% if (book.cover_image) { %>
                                                <img src="<%= book.cover_image %>"
                                                     alt="<%= book.title %>"
                                                     class="min-w-32 max-w-32 min-h-44 max-h-44 sm:w-16 sm:h-full object-cover rounded-lg">
                                            <% } else { %>
                                                <div class="min-w-32 max-w-32 min-h-44 max-h-44 sm:w-16 sm:h-full bg-gray-200 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-book fa-2x text-gray-400"></i>
                                                </div>
                                            <% } %>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <h3 class="text-xl font-bold text-gray-900 mb-4 hover:text-blue-600 transition-colors duration-200 leading-tight">
                                                <a href="/book/<%= book.username %>/<%= book.slug %>" class="hover:text-blue-600">
                                                    <%= book.title %>
                                                </a>
                                            </h3>
                                            <p class="text-sm text-gray-600 line-clamp-3 leading-relaxed">
                                                <%= book.description ? book.description.substring(0, 120) + '...' : '暂无描述' %>
                                            </p>
                                        </div>
                                    </div>

                                    <div class="flex items-center justify-between pt-4 border-t border-gray-100">
                                        <span class="flex items-center font-medium text-gray-600">
                                            <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                                <i class="fas fa-user text-blue-600 text-xs"></i>
                                            </div>
                                            <%= book.username || '匿名' %>
                                        </span>
                                        <span class="flex items-center font-medium text-gray-600">
                                            <div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mr-2">
                                                <i class="fas fa-eye text-green-600 text-xs"></i>
                                            </div>
                                            <%= book.view_count || 0 %>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <% }) %>
                </div>
            <% } else { %>
                <div class="text-center py-16 bg-white rounded-2xl border border-gray-100">
                    <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-book text-blue-500 text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">暂无推荐内容</h3>
                    <p class="text-gray-500 text-lg">成为第一个创建书籍的用户吧！</p>
                </div>
            <% } %>

            <div class="text-center">
                <%- include('../components/button', { href: '/explore', text: '查看更多书籍', icon: 'fas fa-arrow-right', variant: 'outline', size: 'lg', className: 'px-8 py-4 border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white' }) %>
            </div>
        </div>
    </div>
</div>

<%- include('../layouts/base/footer') %>